
.delegate {
    display: inline-block;
    background-image: url(./assets/misc/delegate.png);
    width: 24px;
    height: 30px;
    background-size: 24px 30px;
    vertical-align: middle;
    filter: drop-shadow(0px 0px 1px black);
    margin-bottom: 6px;
}

.delegate-red {
    filter: drop-shadow(0px 1px 1px darkred) drop-shadow(0px -1px 1px red) drop-shadow(0px 0px 2px black);
}

.party {
    background: #ddd;
    padding: 0px 10px 0px 10px;
    border: 1px solid #666;
    border-radius: 20px;
    text-transform: uppercase;
}

.influence {
    display: inline-block;
    background-image: url(./assets/misc/influence.png);
    width: 40px;
    height: 40px;
    background-size: 40px 40px;
    vertical-align: middle;
    margin-bottom: 5px;
}

.chairman {
    display: inline-block;
    background-image: url(./assets/misc/chairman.png);
    width: 24px;
    height: 30px;
    background-size: 24px 30px;
    vertical-align: middle;
    filter: drop-shadow(0px 0px 1px black);
    background-color: #222;
    padding: 3px;
    background-repeat: no-repeat;
    background-position: 3px;
    border-radius: 15px 15px 2px 2px;
    margin-bottom: 6px;
}

.leader {
    display: inline-block;
    background-image: url(./assets/misc/delegate.png);
    width: 24px;
    height: 30px;
    background-size: 24px 30px;
    vertical-align: middle;
    filter: drop-shadow(0px 0px 1px black);
    background-color: #222;
    padding: 3px;
    background-repeat: no-repeat;
    background-position: 3px;
    border-radius: 15px 15px 2px 2px;
    margin-bottom: 6px;
}

.turmoil {
    color: #000000;
    font-size: medium;
    line-height: initial;
    box-sizing: initial;
    text-align: center;
    width: 1010px;
    display: inline-block;
    vertical-align: top;
    transform: scale(0.88);
    margin: -40px 0 -45px -60px;
}

.events-board {
    display: inline-block;
    vertical-align: top;
    box-sizing: initial;
    text-align: left;
    margin: 10px 0 -10px 0px;
    width: 1010px;
}

.global-event {
    display: inline-block;
    vertical-align: top;
    width: 332px;
    height: 186px;
    margin: 0 1px;
    background: url(./assets/parties/global_event.png);
    color: #000000;
    font-size: medium;
    border-radius: 5px;
    margin-bottom: 10px;
}

.global-event-card-content {
    width: 300px !important;
    height: 118px !important;
    justify-content: center;
    margin: 0 auto;
    top: 3px;
    box-sizing: inherit;
}

.global-event-title {
    position: absolute;
    text-transform: uppercase;
    width: 200px;
    margin-top: 135px;
    margin-left: 70px;
    font-weight: 600;
    text-align: center;
    height: 32px;
    top: 11px;
}

.global-event-name {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    line-height: 15px;
}

.event-title {
    display: none;
}
.event-parties {
    margin-bottom: 10px;
}

.event-party {
    position: absolute;
    width: 200px;
    font-family: Ubuntu, Sans;
    font-weight: bold;
    text-align: center;
    line-height: 35px;
    color: #fff;
    background: #000;
    text-transform: uppercase;

    &.event-party--revealed {
        clip-path: polygon(5% 0, 95% 0, 100% 30%, 100% 80%, 100% 100%, 6% 100%, 0% 70%, 0 0);
        margin: 0px 0 0 69px;
    }

    &.event-party--current {
        clip-path: polygon(5% 0%, 100% 0, 100% 40%, 89% 102%, 0% 100%, 0% 35%);
        margin: 136px 0 0 127px;
    }

    &.event-party--greens {
        background: #16b215;
    }

    &.event-party--scientists {
        background: #fff;
        color: #222;
    }

    &.event-party--mars_first {
        background: #c97e23;
    }

    &.event-party--unity {
        background: #108ff0;
    }

    &.event-party--reds {
        background: #e65b5a;
    }

    &.event-party--kelvinists {
        background: #5d4d4d;
    }
}

.global-event--coming .event-party--bottom {
    margin-left: 123px
}

.global-event--current .event-party--bottom {
    margin-left: 121px
}

.event-content {
    display: table-cell;
    vertical-align: middle;
    height: 170px;
    padding: 0 30px;
}

.turmoil-board {
    margin: 10px 0 0 0;
    background: url(./assets/turmoil_ui.png);
    background-position: -25px -383px;
    min-height: 500px;
}

.turmoil-header {
    min-height: 180px;
}

.grid-parties {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    gap:10px;
}

.board-party {
    width: 160px;
    height: 160px;
    border-radius: 0 0 10px 10px;
}

.grid-delegates {
    display: grid;
    grid-template-columns: auto auto auto;
    padding: 10px 7px 7px 9px;
    gap:0px;
    min-height: 118px;

    &.grid-in-send-delegate {
        padding-top: 15px;
    }
}

.delegate-spot {
    width: 40px;
    height:40px;
}

.party-container {
    display: inline-block;
    width: 164px;
    height: 307px;
    margin: 15px 10px 10px 0px;
    border: none;
    box-shadow: none;
    border-radius: 0px;
    background: url(./assets/turmoil_ui.png);
    &.party-background--mars_first {
        background-position: -23px 316px;
    }
    &.party-background--scientists {
        background-position: -193px 316px;
    }
    &.party-background--unity {
        background-position: -363px 316px;
    }
    &.party-background--greens {
        background-position: -533px 316px;
    }
    &.party-background--reds {
        background-position: -703px 316px;
    }
    &.party-background--kelvinists {
        background-position: -873px 316px;
    }
}

.party-badge {
    clip-path: polygon(0 0, 80% 0%, 100% 20%, 100% 100%, 20% 100%, 0% 80%);
    font-family: Prototype;
    position: relative;
    display: inline-block;
    margin-top: 5px;
    margin-left: 3px;
    margin-right: 3px;
    margin-bottom: 10px;
    width: 30px;
    height: 30px;
    font-size: 22px;
    line-height: 30px;
    background-size: 30px;
    filter: drop-shadow(0px 0px 1px black);
    vertical-align: middle;

    &.party-badge--greens {
        background: #16b215;
    }

    &.party-badge--scientists {
        background: #fff;
        color: #222;
    }

    &.party-badge--mars_first {
        background: #c97e23;
    }

    &.party-badge--unity {
        background: #108ff0;
    }

    &.party-badge--reds {
        background: #e65b5a;
    }

    &.party-badge--kelvinists {
        background: #5d4d4d;
    }
}

.party-name {
    height: 31px;
    line-height: 32px;
    clip-path: polygon(5% 0, 95% 0, 100% 30%, 100% 80%, 100% 100%, 6% 100%, 0% 70%, 0 0);
    background: #e00bc4;
    width: 165px;
    color: #fff;
    text-transform: uppercase;
    margin: 0 0 6px -3px;

    &.party-name-indicator{
        height: 20px;
        line-height: 22px;
        width: 50px;
        margin: 10px 0 0px 3px;
        font-size: 11px;
        text-align: center;
    }

    &.party-name--greens {
        background: #16b215;
    }

    &.party-name--scientists {
        background: #fff;
        color: #222;
    }

    &.party-name--mars_first {
        background: #c97e23;
    }

    &.party-name--unity {
        background: #108ff0;
    }

    &.party-name--reds {
        background: #e65b5a;
    }

    &.party-name--kelvinists {
        background: #5d4d4d;
    }
}

.grid-leaders {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    gap:10px;
    margin: 11px 0 0 2px;
}

.party-bonus {
    line-height: 18px;
    transform: scale(0.8);
}

.leader-spot {
    width: 40px;
    padding: 7px 55px 0 55px;
    height:72px;
    z-index: 2;

    .delegate-spot {
        transform: scale(0.70);
        margin-top: 5px;
    }
}

.send-delegate-leader-spot {
    transform: scale(0.8);
    padding-top: 12px;
    padding-left: 58px;
}

.turmoil-lobby {
    position: absolute;
    width: 320px;
    margin: 59px 0 0 52px;
    text-align: left;
}

.turmoil-reserve {
    position: absolute;
    width: 355px;
    margin: 59px 0 0 651px;
    text-align: left;
}

.lobby-spot {
    width: 52px;
    height: 63px;
    display: inline-block;
}
.chairman-spot {
    width: 95px;
    height: 87px;
    background: url(./assets/turmoil_ui.png);
    background-position: -343px 876px;
    position: absolute;
    margin: 36px 0 0 495px;
    padding: 17px 0 0 42px;
    transform: scale(0.8);
}

.label-lobby {
    width:115px;
    margin: auto;
}

.label-5mc {
    width: 110px;
    margin: auto;
}

.count-in-send-delegate {
    font-size: 22px;
}

.player-token {
    width: 50px;
    height: 32px;
    background: url(./assets/turmoil_ui.png);
    background-position: -25px -383px;
    font-size: 27px;
    text-align: center;
    padding: 27px 0 0 0;
    color: white;
    font-family: Prototype;

    &.red {
        background-position: -699px 850px;
    }

    &.yellow {
        background-position: -644px 850px;
    }

    &.black {
        background-position: -754px 850px;
    }

    &.blue {
        background-position: -809px 850px;
    }

    &.green {
        background-position: -865px 850px;
    }

    &.purple {
        background-position: -973px 850px;
    }

    &.orange {
        background-position: -644px 780px;
    }

    &.pink {
        background-position: -699px 780px;
    }

    &.neutral {
        background-position: -919px 850px;
        color: #7b7b7b;
    }
}

.player-token-new-leader {
    background: url(./assets/turmoil_ui.png);
    background-position: -486px 861px;
}

.select-party-leader-spot {
    width: 125px;
    height: 85px;
    margin-left: 5px;
    margin-top: 5px;
    &.dominance-marker {
        background: url(./assets/turmoil_ui.png);
        background-position: -486px 861px;
    }
}

.dominant-party-bonus {
    position: absolute;
    margin: 76px 0px 0 322px;
    width: 200px;
    color: white;

    p {
        max-width: 182px;
    }
}

.policy-user-cubes {
    position: absolute;
    margin: 132px 0px 0 336px;
    display: flex;
    flex-flow: row nowrap;
    width: 180px;
    justify-content: center;

    .policy-use-marker {
        display: inline-block;
        width: 21px;
        height: 21px;
        filter: drop-shadow(2px 2px 3px black);
        margin: 5px;

        font-size: 14px;
        color: white;
        line-height: 21px;
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    }
}

.dominant-party-name {
    position: absolute;
    margin: 35px 0 0 340px;
    transform: scale(0.85);
}


.party-production {
    display: inline-block;
    position: relative;
    width: 20px;
    height: 18px;
    font-size: 18px;
    line-height: 18px;
    margin: 3px;
    text-align: center;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 0 0 2px rgba(0,0,0,0.3);
}

.party-production-box {
    width: 44px;
    padding-top: 0px;
    padding-bottom: 0px;
    font-size: 20px;
    line-height: 20px;
    margin-top: 0;
    transform: scale(0.8);
    height: 37px;
    vertical-align: top;
}

.party-resource-tag {
    font-size: 20px;
}

.party-resource {
    margin-right: 0px;
    margin-left: 0px;
}

.party-rating {
    font-size: 20px;
    padding-bottom: 4px;
    padding-left: 5px;
    height: 16px;
    line-height: 11px;
    background-size: 40px 26px !important;
}

.party-inferior-rating {
    background-color: #f06400;
    background: linear-gradient(orange, orangered);
    font-size: 38px;
    font-weight: normal;
    padding-bottom: 7px;
    padding-left: 5px;
    height: 16px;
    line-height: 11px;
    vertical-align: middle;
    margin-top: 7px !important;
}

.party-tile {
    width: 30px;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 8px;
    padding: 4px;
    padding-top: 6px;
    padding-left: 6px;
}

.policies-clickable {
    font-family: Ubuntu, Sans;
    letter-spacing: 1px;
    font-size: 16px;
    color: #303030;
    text-transform: uppercase;
    padding: 3px 26px 3px 26px;
    border-radius: 0 0 20px 20px;
    text-decoration: none;
    cursor: pointer;
    position: absolute;
    margin: 138px 0 0 0;
    font-weight: bold;
	text-align: right;
	width: 460px;
}

.policies-clickable:link {
    color: #303030;
}

.policies-clickable:visited {
    color: #303030;
}

.policy-block {
    background-color: #313131;
    display: inline-block;
    vertical-align: top;
    padding: 5px;
    min-width: 233px;
    min-height: 104px;
    margin: 10px;

    .party-name {
        margin-left: 38px;
    }
}

.policies-global {
    margin-top: 175px;
    position: absolute;
    z-index: 3;
    background-color: #303030;
    border-radius: 10px;
}

.policy-bonus {
    margin-left: 20px;
    color: white;
}

.card-small {
    transform: scale(0.8);
    margin-left: 0px;
    margin-top: 0px;
    margin-bottom: 5px;
}

.greenery-tile-small {
    transform: scale(0.8);
    margin-left: 0px;
    margin-top: -5px;
    margin-bottom: 0px;
}

.policy-card-with-tag {
    margin-top: 10px;
}

.req-tile-small {
    transform: scale(0.8);
    margin: 10px 0px;
}

.policy-top-margin {
    margin-top: 10px;
}

.scientists-requisite {
    background-image: url(./assets/requisites/min_small.png);
    width: 60px;
    height: 30px;
    background-size: 60px 30px;
    margin-top: 15px;
    margin-left: 75px;
}

.standard-projects {
    background-image: url(./assets/misc/standard_projects.png);
    width: 84px;
    height: 30px;
    background-size: 84px 30px;
    display: inline-block;
    margin-bottom: -10px;
}

.turmoil-party-transition-arrow-grid {
    position: absolute;
    left: 130px;
    top: 400px;

    .turmoil-party-transition-arrow {
        display: inline-block;
        width: 70px;
        height: 15px;
        background-color: #444;
        clip-path: polygon(30% 15%, 30% 40%, 100% 40%, 100% 60%, 30% 60%, 30% 85%, 0% 50%);
        margin-right: 96px;
    }
}

.red-arrow-3x {
    background-image: url(./assets/misc/arrow_3x.png);
    background-size: 30px;
    width: 30px;
    height: 30px;
    vertical-align: middle;
    display: inline-block;
    margin-bottom: 15px;
    background-repeat: no-repeat;
    background-position: 0px;
}

.red-arrow-infinity {
    background-image: url(./assets/misc/arrow_infinity.png);
    background-size: 30px;
    width: 30px;
    height: 30px;
    vertical-align: middle;
    display: inline-block;
    margin-bottom: 15px;
    background-repeat: no-repeat;
    background-position: 0px;
}

.selectable-party-name {
    position: absolute;
    top: 220px;
    left: 3px;
    transform: scale(0.9);
    text-align: center;
}

input[type="radio"]:checked + .party-container.filterDiv {
    box-shadow: none;
}

input[type="radio"]:checked + .party-container::after {
    top: 253px;
    left: 8px;
    width: 149px;
    background: #e28c22;
    height: 47px;
    font-size: 36px;
    border-radius: 4px;
    border: none;
}

.unavailable-party {
    filter: brightness(0.4);
    cursor: default;
}
